import { useState } from 'react'
import uuid from 'react-uuid'
import './index.css'
import { useStore } from '../../store'
import { observer } from 'mobx-react-lite'

const Task = observer(function Task() {
	const { taskStore } = useStore()

	const [keyword, setKeyword] = useState('')

	const handleKeyUp = e => {
		if (e.keyCode === 13) {
			taskStore.add({
				id: uuid(),
				name: keyword,
				isDone: false
			})
			setKeyword('')
		}
	}

	return (
		<section className="todoapp">
			<header className="header">
				<h1>todos</h1>
				<input
					className="new-todo"
					autoFocus
					autoComplete="off"
					value={keyword}
					onChange={e => setKeyword(e.target.value)}
					onKeyUp={handleKeyUp}
					placeholder="What needs to be done?"
				/>
			</header>
			<section className="main">
				<input
					id="toggle-all"
					className="toggle-all"
					type="checkbox"
					value={taskStore.isAllDone}
					onChange={e => taskStore.allCheck(e.target.checked)}
				/>
				<label htmlFor="toggle-all"></label>
				<ul className="todo-list">
					{taskStore.list.map(item => (
						<li key={item.id} className={item.isDone ? 'todo completed' : 'todo'}>
							<div className="view">
								<input
									className="toggle"
									type="checkbox"
									checked={item.isDone}
									onChange={() => taskStore.update(item.id)}
								/>
								<label>{item.name}</label>
								<button className="destroy" onClick={() => taskStore.del(item.id)}></button>
							</div>
						</li>
					))}
					{/* 
					<li className="todo">
						<div className="view">
							<input className="toggle" type="checkbox" />
							<label>learn react</label>
							<button className="destroy"></button>
						</div>
					</li>
					<li className="todo completed">
						<div className="view">
							<input className="toggle" type="checkbox" defaultChecked={true} />
							<label>learn react</label>
							<button className="destroy"></button>
						</div>
					</li> */}
				</ul>
			</section>
			<div>
				任务总数：{taskStore.total} 已完成：{taskStore.doneNum}
			</div>
		</section>
	)
})

export default Task
